<template>
    <div class="content">
        <div class="header">
            <div class="left" @click="$router.back()">
                <i class="iconfont icon-xiangzuojiantou"></i>
            </div>
            <div class="right">
                <span>设置</span>
            </div>
        </div>

        <div class="main" style="margin-top: 0.15rem;">
            <setCom :items="datas" />
        </div>
        <div class="setup" style="margin-top: 0.15rem;">
            <setCom :items="datas2">
                <template v-slot:right-content="{ item }">
                    <!-- 这里可以自定义内容 -->
                    <span>{{ 11.8 + "M" }}</span>
                </template>
            </setCom>
        </div>
        <!--  -->
        <div class="tuj">
            <setCom :items="datas2" style="margin-top: 0.15rem;">
                <template v-slot:right-content="{ item }">
                    <!-- 这里可以自定义内容 -->
                    <span>{{ 3.22 }}</span>
                </template>
            </setCom>
        </div>

        <div class="oulongin" @click="offloginClick">
            <van-button type="default" block>退出登录</van-button>
        </div>
    </div>
</template>


<script lang="ts" setup>
import setCom from '@/components/setCom/setCom.vue';
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router';
const router = useRouter()
const user = useUserStore()
const datas = [
    { title: '账号管理', ions: 'iconfont icon-dingdan', right: 'iconfont icon-xiangyoujiantou', showSlot: true },
    { title: '通知设置', ions: 'iconfont icon-dingdan', right: 'iconfont icon-xiangyoujiantou', showSlot: true },
    { title: '隐私设置', ions: 'iconfont icon-dingdan', right: 'iconfont icon-xiangyoujiantou', showSlot: true },
]
const datas2 = [
    { title: '常见问题', ions: 'iconfont icon-dingdan', right: 'iconfont icon-xiangyoujiantou', showSlot: false },
    { title: '清除缓存', ions: 'iconfont icon-dingdan', right: 'iconfont icon-xiangyoujiantou', showSlot: true },
]
const datas3 = [
    { title: '推荐给好友', ions: 'iconfont icon-dingdan', right: 'iconfont icon-xiangyoujiantou', showSlot: false },
    { title: '基本信息', ions: 'iconfont icon-dingdan', right: 'iconfont icon-xiangyoujiantou', showSlot: true },
]



function offloginClick() {
    user.changeUserState({
        loggedIn: false,
        userId: '',
        token: ''
    })
    // 清除手机号和密码
    localStorage.removeItem('phone')
    localStorage.removeItem('password')
    localStorage.removeItem('username')
    router.push('/login')
}
</script>

<style scoped lang="scss">
.content {
    background-color: #f5f5f5;
    height: 100%;
}

.header {
    height: 0.5rem;
    background-color: #fff;


    .left {
        flex: 1;

        .iconfont {
            font-size: 0.18rem;
        }
    }

    .right {
        flex: 1.3;
        // background-color: red;
        font-size: 0.2rem;
    }

}

.main {
    .titles {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .left {
        padding: 0.15rem;
        font-size: 0.18rem;

        .icons {
            background: #3e64ff;
            color: white;
            border-radius: 50%;
            padding: 0.08rem;
            font-size: 0.18rem;
            margin-right: 0.05rem;
        }
    }

    .rigt {
        .right-icons {
            font-size: 0.15rem;
            padding-right: 0.04rem;
        }

    }
}

.oulongin {
    display: flex;
    padding: 0.18rem;

}
</style>